<template>
  <div class="container">
    <div>
      <h1 class="user-info">家人列表</h1>
    </div>
    <div>
      <a-space class="user-bar">
        <span>姓名</span>
        <a-input class="clearedInput" v-model = "username" :style="{ width: '480px' }" placeholder="请输入家人姓名" allow-clear/>

        <span>联系方式</span>
        <a-input class="clearedInput"  v-model = "mobile"  :style="{ width: '480px' }" placeholder="请输入家人联系方式" allow-clear />
        <span>身份设定</span>
        <a-select
          v-model="selectTitle"
          style="width: 400px;"  
          @click="getDownList"
           placeholder="请选择家人身份"
           >
              <a-option 
              v-for="items in arrList" 
              :key ="items.id"
              :value="items.title"
              >
              {{items.title}}
            </a-option>
          </a-select>
      </a-space>
    </div>

    <!-- 列表部分 -->
    <div>
      <div class="addclassbtn">
        <!-- 创建班级按钮（跳转路由/创建蒙层） -->
        <a-button type="primary" @click="addClassFun">录入用户</a-button>
        <a-button type="primary" @click="resetMessage" class="user-reset">重置</a-button>
        <a-button type="primary" @click="searchUserMethod" class="user-research">查询</a-button>
      </div>
      <div>
        <a-table row-key="id" :loading="loading" :pagination="pagination" :data="families" :bordered="false">
          <template #columns>
            <a-table-column :title="$t('UID')" data-index="id" />
            <a-table-column :title="$t('用户名')" data-index="name" />
            <a-table-column :title="$t('手机号')" data-index="phone" />
            <a-table-column :title="$t('用户身份')" data-index="role" />
            <a-table-column :title="$t('最近登录时间')" data-index="regist_time" />
            <a-table-column :title="$t('操作')" data-index="operations">
              <template #cell="row">
                <a-button @click="reviseList(row)" v-permission="['admin']" type="text" size="small">
                  {{ $t('编辑') }}
                </a-button>
                <a-popconfirm @ok="delList(row)" content="Are you sure you want to delete?" type="error">
                  <a-button v-permission="['admin']" type="text" size="small">
                    {{ $t('删除') }}
                  </a-button>
                </a-popconfirm>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
    <div v-show="visible" class="a-mask">
      <div class="addClassIpt">
        <AddClass @confirmfun="confirmfun" @cancelfun="cancelfun"></AddClass>
      </div>
    </div>
    <div v-show="visible_revise" class="a-mask">
      <div class="addClassIpt">
        <ReviseClass @confirmFun_revise="confirmFun_revise" @cancelFun_revise="cancelFun_revise" v-bind:row_="row_">
        </ReviseClass>
      </div>
    </div>
  </div>
</template>

<script>

import AddClass from './add-class.vue'
import ReviseClass from './revise-subject.vue'

export default {
  components: {
    AddClass,
    ReviseClass
  },
  data() {
    return {
      visible: false,
      visible_revise :false ,
      arrList:[],
      classList: [],
      username:"",
      technology:"",
      mobile:"",
      phone:"",
      families:[
        {
          id:'1',
          name:'我自己',
          phone:'13812345678',
          role:'管理员',
          regist_time:'13小时前'
        },
        {
          id:'2',
          name:'张三',
          phone:'13887654321',
          role:'父亲',
          regist_time:'13小时前'
        },
        {
          id:'3',
          name:'李四',
          phone:'18712345678',
          role:'母亲',
          regist_time:'13小时前'
        },
        {
          id:'4',
          name:'张六',
          phone:'18787654321',
          role:'姐姐',
          regist_time:'13小时前'
        },
        {
          id:'5',
          name:'张七',
          phone:'18812345678',
          role:'哥哥',
          regist_time:'13小时前'
        },
        {
          id:'6',
          name:'张一',
          phone:'18887654321',
          role:'爷爷',
          regist_time:'13小时前'
        },
        {
          id:'7',
          name:'李一',
          phone:'18912345678',
          role:'奶奶',
          regist_time:'13小时前'
        },
        {
          id:'8',
          name:'11',
          phone:'13812345678',
          role:'大姨',
          regist_time:'13小时前'
        },
      ]
    }
  },
  methods: {

    addClassFun() {
      this.visible = true
    },
    cancelfun() {
      this.visible = false
    },
    handleUserList() {
      
    },
    delList(row) {
      
    },
    // 编辑 
    reviseList(row) { 
      console. log("1");
      this.visible_revise = true 
    }, 
    resetMessage() {
      // document.getElementByclass('clearedInput').default-value = ""
      // 数据清空  
      this.username = ""
      this.technology="",
      this.mobile="",
      this.avatar="",
      this.salt = "",
      // 刷新
      this.handleUserList();
    },
    //查询用户
    searchUserMethod() { 
      // console.log(1);
      // this.classList = [] ; 
      let _username = this.username ; 
      let _technology = this.technology; 
      let _mobile = this.mobile ;
      let _salt = this.salt ; 
      let _avatar = this.avatar; 
      
      console.log(_username);
      console.log(_technology);
    },
    cancelFun_revise(){
      this.visible_revise = false 
    },
    //获取身份信息
    getDownList(){
      console.log(1);
      // getRoleList().then((res)=>{
      //   // console.log(res.data.data);
      //   this.arrList = res.data.data;
      // })
    },
  },
  
  created() {
    this.handleUserList();
  }
}

</script>

<style scoped lang="less">
.container {
  padding: 0 20px 40px 20px;
  background-color: var(--color-bg-2);
  overflow: hidden;
  height: 100%;
}

.searchbutton {
  margin-left: 84px;
}

.linemarginleft {
  margin-right: 37px;
}

.linemarginright {
  margin-left: 37px;
}

.addclassbtn {
  margin-top: 28px;
  margin-bottom: 24px;
  margin-left: 5px;
}

.a-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;

  .addClassIpt {
    width: 700px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    margin-top: 120px;
    padding-top: 10px;
    padding-left: 10px;
    border-radius: 20px;
  }

}

.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;

  .addClassIpt {
    width: 700px;
    height: 350px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    margin-top: 120px;
    padding-top: 10px;
    padding-left: 10px;
    border-radius: 20px;
  }

}

.user-info {
  margin-left: 20px;
}

.user-bar {
  margin-left: 20px;
}

.user-reset {
  margin-left: 1205px;
}

.user-research {
  margin-left: 10px;
}
</style>